<template>
  <div class="radio-list">
    <div style="color: red;" class="w100 pl-1 py-3 text-m text-weight-6">热门电台</div>
    <ul class="d-flex flex-wrap jc-around">
      <li v-for="item in hotRadioList" :key="item.id">
        <img v-lazy="item.picUrl" width="110" height="110" @click="toRadioDetail(item.id,item.name)">
        <div class="namew text-center text-xxs pt-1">{{item.name}}</div>
      </li>
    </ul>
    <div style="color: red;" class="w100 pl-1 py-3 text-m text-weight-6">新晋电台</div>
    <ul class="d-flex flex-wrap jc-around">
      <li v-for="item in newRadioList" :key="item.id">
        <img v-lazy="item.picUrl" width="110" height="110" @click="toRadioDetail(item.id,item.name)">
        <div class="namew text-center text-xxs pt-1">{{item.name}}</div>
      </li>
    </ul>
    <div style="color: red;" class="w100 pl-1 py-3 text-m text-weight-6">电台榜单</div>
    <ul class="d-flex flex-wrap jc-around">
      <li v-for="item in rankRadioList" :key="item.program.radio.id">
        <img v-lazy="item.program.radio.picUrl" width="110" height="110" @click="toRadioDetail(item.program.radio.id,item.program.radio.name)">
        <div class="namew text-center text-xxs pt-1">{{item.program.radio.name}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radioSong: {}
      }
    },
    props: {
      hotRadioList: Array,
      newRadioList: Array,
      rankRadioList: Array
    },
    methods: {
      toRadioDetail(id,name) {
        this.$emit('to-radio-detail', id, name)
      },
      async getRadioSongId(id) {
        const {
          data: res
        } = await this.$http.get('/dj/program', {
          params: {
            rid: id
          }
        })
        // const { data: resu } = await this.$http.get('/dj/program/detail',{params:{id:id}})
        this.$emit('get-radio-song',res.programs[0].mainSong.id)
      }
    }
  }
</script>

<style scoped>
  .namew {
    width: 110px;
  }
</style>
